<template>
  <div class="goods-list">
    <ul v-if="goodslist">
      <li v-for="(item, index) in goodslist" :key="index" class="goods-list-item">
        <a href="javascript:;" @click="imageItemClick(item.iid)">
          <!-- 图片加载完自动调用load事件 原生-->
          <img v-if="item&&item.show" :src="item.show.img" @load="imageLoad">
          <h3 v-if="item&&item.title">{{item.title}}</h3>
          <div>
            <span class="price" v-if="item&&item.price">{{item.price}}</span>
            <span class="cfav" v-if="item&&item.cfav">{{item.cfav}}</span>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    goodslist: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    imageLoad() {
      // console.log('imageload')
      this.$emit("imageItemLoad");
      // this.$bus.$emit('imageItemLoad')
    },
    imageItemClick(iid) {
      this.$router.push({ name: "goodsListItem", params: { id: iid } });
      // this.$router.push({path:`/detail/${iid}`})
    }
  },
  components: {},
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.goods-list {
  ul {
    display: flex;
    flex-flow: row wrap;
    margin: 0 5px;
    .goods-list-item {
      flex: 48%;
      padding-top: 8px;
      a {
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #666;
        img {
          width: 97%;
          min-height: 265px; //规定最小高度
          border-radius: 6px;
        }
        h3 {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .price {
          color: #ff5777;
          padding-right: 5px;
        }
        .cfav {
          padding-left: 16px;
          background: url("~assets/img/common/collect.svg") no-repeat left
            center;
          background-size: 16px 16px;
        }
      }
    }
  }
}
</style>